<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form">
          <template #ShopCascade>
            <SelectsShopCascade v-model:platform="form.platform_id" v-model:site="form.site" v-model:shop="form.shop_id" />
          </template>
          <template #ShippingCountry>
            <SelectCountry multiple collapse-tags v-model="form.shipping_country" style="width: 240px" placeholder="发货国家" labelKey2="true"></SelectCountry>
          </template>
          <template #DestinationCountry>
            <SelectCountry multiple collapse-tags v-model="form.destination_country" style="width: 240px" placeholder="收货国家" labelKey2="true"></SelectCountry>
          </template>
          <template #ShippingMethod>
            <SelectShippingMethod placeholder="运输方式" v-model="form.logistic_id" multiple collapseTags style="width: 240px" />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <VButton type="primary" @click="add" v-hasPermi="[basicSetupAuthList.sales_VAT.add]">
          <div class="dk-iconfont icon-Plus"></div>
          新增
        </VButton>
        <VButton @click="handleStatus(1)" v-hasPermi="[basicSetupAuthList.sales_VAT.enable]">
          <div class="dk-iconfont icon-CircleCheck text-[#3487FF]"></div>
          启用
        </VButton>
        <VButton @click="handleStatus(0)" v-hasPermi="[basicSetupAuthList.sales_VAT.disable]">
          <div class="dk-iconfont icon-Disabled text-[red]"></div>
          禁用
        </VButton>
      </template>
    </VTable>
    <!-- <VLog ref="logRef" :api="oplog"></VLog> -->
    <!-- 日志/ -->
    <Log dialog v-model="logVisible" :autoLoad="false" tag="vat_setting" :business_id="logId" />

    <Vedit ref="edit" :title="editTitle" class="dialogPublic" :formula="formula" :vat_type="vat_type" @confirm="editConfirm"> </Vedit>
    <Vtransport ref="transport" class="dialogPublic"></Vtransport>
  </VPage>
</template>

<script setup lang="jsx" name="basic-setupSales-VAT">
import { overallOptions } from "@/api/public"
import { queryList, oplog, settingStatus, deleteSetting } from "./api"
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import { basicSetupAuthList } from "@/Auth/basic-setup.js"
import XForm from "@/components/XForm/index.vue"
import SelectsShopCascade from "@/components/Selects/SelectsShopCascade/index.vue"
import SelectCountry from "@/components/Selects/SelectCountry"
import SelectShippingMethod from "@/components/Selects/SelectShippingMethod/index.vue"

// 查看日志

import Log from "@/components/Log/index.vue"
const logVisible = ref(false)
const logId = ref("")
const viewLog = (item) => {
  logId.value = item.id
  logVisible.value = true
}

// import VLog from "@/components/VLog"
import Vedit from "./components/edit"
import Vtransport from "./components/transport"
const edit = ref()
const data = reactive({
  editTitle: "新增",
  statusOption: [],
  vat_type: [],
  formula: [],
})

const { editTitle, statusOption, vat_type, formula } = toRefs(data)
const tableRef = ref()
// const logRef = ref()
const transport = ref()

const formOption = ref({
  inline: true,
})
const fieldList = ref([
  { slot: "ShopCascade" },
  { slot: "ShippingCountry" },
  { slot: "DestinationCountry" },
  { slot: "ShippingMethod" },
  {
    field: "vat_type",
    type: "select",
    options: {
      placeholder: "VAT设置类型",
      data: vat_type,
    },
    style: { width: "140px" },
  },
  {
    field: "status",
    type: "select",
    options: {
      placeholder: "状态",
      data: statusOption,
    },
    style: { width: "100px" },
  },
  {
    field: "create_user",
    type: "cascader",
    itemProps: { placeholder: "创建人" },
    style: { width: "200px" },
  },
])

//编辑
const ruleEdit = (row) => {
  editTitle.value = "编辑"
  edit.value.open(row)
}
//新增
const add = () => {
  editTitle.value = "新增"
  edit.value.open()
}
const editConfirm = () => {
  query()
}
//删除
const profitSettingDeleteF = (id) => {
  ElMessageBox.confirm("此操作将永久删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "oms-message-confirm-button",
  }).then(async () => {
    try {
      deleteSetting({ id }).then((res) => {
        ElMessage.success("删除成功")
        query()
      })
    } catch (e) {
      throw Error(e)
    }
  })
}
//启用
const handleStatus = (status) => {
  if (!getSelectRow().length) {
    return false
  }
  const arr = getSelectRow()
  settingStatus({ id: arr, status }).then((res) => {
    ElMessage({ message: "操作成功", type: "success" })
    query()
  })
}

// 查询
const query = () => {
  tableRef?.value.query()
}

import { getAloneEnum } from "@/utils/enumUtils"
const originOption = ref({})
//获取下拉数据
onMounted(async () => {
  overallOptions({ params: ["base.vatSetting"] }).then((res) => {
    statusOption.value = res.data.baseVatSetting.status
    formula.value = res.data.baseVatSetting.formula
    vat_type.value = res.data.baseVatSetting.vat_type
  })
  let optData = await getAloneEnum(["platform"])
  originOption.value.platform = Object.fromEntries(optData?.platform.map((v) => [v.value, v.label]))
})

//获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  const arr = []
  getCheckboxRecords.map((e) => {
    arr.push(e.id)
  })
  return arr
}

//获取文本
const getText = (arr, val) => {
  return arr.map((e) => {
    if (e.value === val) {
      return e.label
    }
  })
}

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      platform_id: [],
      site: [],
      shop: [],
      status: "",
      create_user: [],
      rule_type: [],
      rule_name: [],
    },
  },
  showOverflow: true,
  columns: [
    { type: "checkbox", fixed: "left", width: 60 },
    { field: "id", title: "ID", width: 80 },
    {
      field: "vat_type",
      title: "VAT设置类型",
      width: 120,
      slots: {
        default: ({ row }) => {
          return <div> {getText(vat_type.value, row.vat_type)}</div>
        },
      },
    },
    {
      field: "platform_id_desc",
      title: "订单平台",
      minWidth: 120,
      slots: {
        default: ({ row }) => <VText value={originOption.value.platform?.[row.platform_id]} />,
      },
    },
    {
      field: "site_code",
      title: "站点",
      minWidth: 140,
      slots: {
        default: ({ row }) => <VText value={row.site_code?.join()} />,
      },
    },
    {
      field: "shops",
      title: "店铺",
      minWidth: 100,
      slots: {
        default: ({ row }) => <VText value={row.shops?.join()} />,
      },
    },
    { field: "tax_rate", title: "VAT税率%", minWidth: 120 },
    { field: "formula", title: "计算公式", minWidth: 120 },
    {
      field: "logistics_method",
      title: "运输方式",
      minWidth: 100,
      slots: {
        default: ({ row }) => <VText value={row?.logistics_method?.join()} />,
      },
    },
    {
      field: "shipping_country_name",
      title: "发货国家",
      minWidth: 120,
      slots: {
        default: ({ row }) => <VText value={row.shipping_country_name?.join()} />,
      },
    },
    {
      field: "destination_country_name",
      title: "收货国家",
      minWidth: 120,
      slots: {
        default: ({ row }) => <VText value={row.destination_country_name?.join()} />,
      },
    },
    {
      field: "province",
      title: "州/省",
      minWidth: 120,
      slots: {
        default: ({ row }) => <VText value={row?.province?.join()} />,
      },
    },
    {
      title: "状态",
      field: "status_text",
      width: 100,
      slots: {
        default: ({ row }) => <VStatus value={!!row.status} />,
      },
    },
    { field: "create_user", title: "创建人", width: 150 },
    { field: "create_time", title: "创建时间", width: 170 },
    {
      title: "操作",
      width: 150,
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link type="primary" onClick={() => ruleEdit(row)} v-hasPermi={[[basicSetupAuthList.sales_VAT.edit]]}>
                编辑
              </el-button>
              <el-button link type="primary" onClick={() => viewLog(row)} v-hasPermi={[[basicSetupAuthList.sales_VAT.log]]}>
                日志
              </el-button>
              <el-button link type="danger" onClick={() => profitSettingDeleteF(row.id)} v-hasPermi={[[basicSetupAuthList.sales_VAT.delete]]}>
                删除
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => queryList({ ...form, ...page }),
    },
  },
})
</script>
<style lang="scss" scoped></style>
